import { Button, Form, Input, InputNumber, TimePicker } from 'antd';
import type { Store } from 'antd/es/form/interface';
import type { ArtColumn } from 'ali-react-table';
import { TjSlideSelect } from '@/tjComponents';
import moment from 'moment';

const columns = (
  save: (id: string, index: number) => void,
  cancel: (id: string, index: number) => void,
  edit: (id: string, index: number) => void,
): ArtColumn[] => [
  {
    name: '虚拟时段',
    width: 120,
    align: 'center',
    code: 'virtualTimeOrder',
  },
  {
    name: '日滚动交易序列',
    align: 'center',
    code: 'dateRange',
    width: 200,
  },
  {
    name: '时段类型',
    code: 'timeOrder',
    align: 'center',
    width: 170,
  },
  {
    name: '买方最低限价',
    code: 'buyLowPrice',
    align: 'center',
    width: 150,
    render: (value: any, row: any) => {
      return row.editor ? (
        <Form.Item name={`buyLowPrice@${row.id}`}>
          <InputNumber min={0} disabled={row.tradeType === 1} />
        </Form.Item>
      ) : value && value !== 0 ? (
        value
      ) : (
        '-'
      );
    },
  },
  {
    name: '卖方最高限价',
    code: 'sellUpPrice',
    align: 'center',
    width: 150,
    render: (value: any, row: any) => {
      return row.editor ? (
        <Form.Item name={`sellUpPrice@${row.id}`}>
          <InputNumber min={0} disabled={row.tradeType === 2} />
        </Form.Item>
      ) : value && value !== 0 ? (
        value
      ) : (
        '-'
      );
    },
  },
  {
    name: '交易方向',
    code: 'tradeType',
    align: 'center',
    width: 150,
    render: (value: any, row: any) => {
      // return value === 1 ? '买入' : '卖出';
      return row.editor ? (
        <Form.Item name={`tradeType@${row.id}`}>
          <TjSlideSelect
            items={[
              { label: '买入', value: 1 },
              { label: '卖出', value: 2 },
            ]}
          />
        </Form.Item>
      ) : value === 1 ? (
        '买入'
      ) : (
        '卖出'
      );
    },
  },
  {
    name: '日电量',
    code: 'declarationQuantity',
    align: 'center',
    width: 150,
    render: (value: any, row: any) => {
      return row.editor ? (
        <Form.Item name={`declarationQuantity@${row.id}`}>
          <InputNumber min={0} />
        </Form.Item>
      ) : (
        value
      );
    },
  },
  {
    name: '交易电价',
    code: 'declarationPrice',
    align: 'center',
    width: 150,
    render: (value) => (value ? value : '-'),
    // render: (value: any, row: any) => {
    //   return row.editor ? (
    //     <Form.Item name={`declarationPrice@${row.id}`}>
    //       <InputNumber min={0} />
    //     </Form.Item>
    //   ) : (
    //     value
    //   );
    // },
  },
  {
    name: '交易时间',
    code: 'times',
    align: 'center',
    width: 240,
    render: (value: any, row: any) => {
      return row.editor ? (
        <Form.Item name={`times@${row.id}`}>
          <TimePicker.RangePicker format={'HH:mm'} />
        </Form.Item>
      ) : (
        `${row.startTime}-${row.endTime}`
      );
    },
  },
  {
    name: '是否申报',
    code: 'openOrClose',
    align: 'center',
    width: 120,
    render: (value: any, row: any) => {
      return row.editor ? (
        <Form.Item name={`openOrClose@${row.id}`}>
          <TjSlideSelect
            items={[
              { label: '是', value: true },
              { label: '否', value: false },
            ]}
          />
        </Form.Item>
      ) : value ? (
        '是'
      ) : (
        '否'
      );
    },
  },
  {
    name: '操作',
    width: 150,
    align: 'center',
    render: (value: any, row: any, index: number) => {
      return row.editor ? (
        <>
          <Button type="link" onClick={() => save(row.id, index)}>
            保存
          </Button>
          <Button type="link" onClick={() => cancel(row.id, index)}>
            取消
          </Button>
        </>
      ) : (
        <>
          <Button type="link" onClick={() => edit(row.id, index)}>
            编辑
          </Button>
        </>
      );
    },
  },
];

const rules: any = {};

export { columns, rules };
